import React, {Component} from 'react';

require('./css/frame.css');


const pars=['一、在导航高级设置下，勾选“自动发起步行导航”。' ,
            '二、手机选择目的地并在连接后自动更新至车机，驾车导航前往目的地。',
        '三、当驾车行驶至距离目的地2km-50m时，车机与APP建立连接，自动发送步行导航信息至手机， 断开连接时，手机端会弹出提醒。',
        '四、点击下方开始导航，开启手机导航前往目的地或选择其他导航软件前往目的地。',
        '五、若没有勾选“自动发起步行导航”，当驾车至距离目的地2km-50m时，车机端会提示选中 “步行导航”。'
];

const Img0=(props)=>{
    return(
        <div id="imgbtn">
            <div id="img0" onClick={props.nextImg} style={{cursor:'pointer'}}></div>
        </div>
    )
}
const Img1=(props)=>{
    return(
        <div id="imgbtn">
            <div id="img0" ></div>
            <div id="img1" onClick={props.nextImg} style={{cursor:'pointer'}}></div>
        </div>
    )
}
const Img2=(props)=>{
    return(
        <div id="imgbtn">
            <div id="img0"></div>
            <div id="img1"></div>
            <div id="img2" onClick={props.nextImg} style={{cursor:'pointer'}}></div>
        </div>
    )
}

const Img3=(props)=>{
    return(
        <div id="imgbtn">
            <div id="img0"></div>
            <div id="img1"></div>
            <div id="img2"></div>
            <div id="img3"></div>
        </div>
    )
}

const top=['5px','70px','145px','243px','320px'];
const Imgs=[Img0,Img1,Img2,Img3];

export default class P5_6 extends Component {
    constructor(...args) {
        super(...args);
        this.state = {
            index: 0,
            im:0,
            t0:0,
        }
    }
    next(){
        let index=this.state.index+1;
        if(index >=5) {
            return;
        }
        this.setState({
            index
        })
    }

    nextImg(){
        let im=this.state.im+1;
        this.setState({
            im
        })
    }

  onClick(){
    this.setState({
      t0:true
    })
  }
  onOver(e){
      this.setState({
        t0:true
      })
  }
  onOut(){
    this.setState({
      t0:false,
    })
  }

    render() {
        const {index , im ,t0} = this.state;
        const Img=Imgs[im];
        return (
            <div id="page">
                <div className="content" id="box5_6">
                    <h4 className="title">步行导航</h4>

                    <div className="ldiv5">
                      <p className="par">1.随时手机搜索目标地址，点击“发送”。</p>
                      <p className="par">2.走向车辆，进入后手机、车机连接完成，手机自行发送目标地址至车机导航。</p>
                        <p className="par">3.车机导航引导至目标地址附近停车点。 </p>
                        <p className="par">4.手机导航至目标地址。</p>
                        <p className="par"><strong>请点击图片查看！</strong></p>
                        <Img  nextImg={this.nextImg.bind(this)}/>

                    </div>
                    <div className="rdiv5">
                        <p className="par">请点击步骤，查看更多内容。 </p>
                        <Par    next={this.next.bind(this)}
                                index={index}
                        />

                      <img
                        src={require("./img/info.png")}
                        className="circle"
                        style={{left:'37px',bottom:"30px"}}
                        onClick={this.onClick.bind(this)}
                        onMouseOver={this.onOver.bind(this)}
                        onMouseOut={this.onOut.bind(this)}
                        id='g1'
                      />



                    </div>

                  {t0===true && <div className="tips" style={{left: '5px', top: "370px"}} id="tip0">
                    <span className="bot" style={{left: '30px'}}></span>
                    <div className="tipcont" id="words">地址发送操作方式可参照步行导航功能的步骤1-2</div>
                  </div>}
                </div>
            </div>

        );
    }
}

const Par=(props)=>{
    return(
        <div>
            {pars.map( (item,i) => {

                if(i<props.index){
                    return <p style={{top:top[i],cursor:'default'}} key={i}>{item}</p>
                }
                if(i===props.index && props.index <4) {
                    return <p style={{top:top[i],cursor:'pointer'}} key={i} onClick={props.next}>{item}</p>
                }
                if(i===props.index && props.index ===4){
                    return <p style={{top:top[i],cursor:'default'}} key={i}>{item}</p>
                }
            })}
            <img src={require('./img/5'+props.index+'.png')}/>
        </div>
    )
}





